<template>
  <PageLayout class="p-24">
    <a-card>
      <a-descriptions :column="1" title="个人信息">
        <a-descriptions-item label="称呼">{{
          detail.nickname
        }}</a-descriptions-item>
        <a-descriptions-item label="联系方式">{{
          detail.phone
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card>
      <a-descriptions :column="1" title="反馈信息">
        <a-descriptions-item label="反馈信息">{{
          detail.content
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card>
      <a-form
        style="width: 400px"
        v-if="detail.status != 2"
        :model="formState"
        :rules="rules"
        ref="formRef"
        layout="Vertical"
        :labelCol="{ style: { width: '80px' } }"
      >
        <a-form-item label="备注信息" name="remark" required>
          <a-textarea
            v-model:value="formState.remark"
            placeholder="请输入备注信息"
            :maxlength="500"
          />
        </a-form-item>
        <a-form-item label="处理状态" name="status" required>
          <a-select
            v-model:value="formState.status"
            placeholder="请选择处理状态"
            :options="statusList"
          />
        </a-form-item>
        <a-button
          type="primary"
          class="float-right"
          style="width: 100px"
          @click="comfirm"
          >确定</a-button
        >
      </a-form>
      <a-descriptions v-else :column="1" title="处理记录">
        <a-descriptions-item label="备注信息">{{
          detail.remark
        }}</a-descriptions-item>
        <a-descriptions-item label="处理状态">{{
          detail.status == 0
            ? "未处理"
            : detail.status == 1
            ? "处理中"
            : "已处理"
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
  </PageLayout>
</template>

<script setup>
import { postFeedbackDetail, postFeedbackHandle } from "@/api/common";
import { message } from "ant-design-vue";
import { reactive } from "vue";
const route = useRoute();
const router = useRouter();
const detail = ref({});
const statusList = [
  // {
  //   label: "未处理",
  //   value: "0",
  // },
  {
    label: "处理中",
    value: 1,
  },
  {
    label: "已处理",
    value: 2,
  },
];
const formState = reactive({
  remark: "",
  status: undefined,
});
onMounted(() => {
  postFeedbackDetail({ id: route.query.id }).then((res) => {
    detail.value = res.data;
    if (detail.value.status == 1) {
      const { remark, status } = res.data;
      formState.remark =remark;
      formState.status =status;
    }
  });
});
const comfirm = () => {
  postFeedbackHandle({
    id: route.query.id,
    ...formState,
  }).then((res) => {
    message.success("处理成功");
    router.go(-1);
  });
};
</script>

<style lang="less" scoped>
.type-list {
}
</style>
